<template>
    <div>
      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
        <el-form-item label="产品名称" prop="mobile">
          <el-input v-model="formData.mobile" placeholder="请输入产品名称" :maxlength="11" show-word-limit clearable
            prefix-icon='el-icon-mobile' :style="{width: '100%'}"></el-input>
        </el-form-item>
        <el-form-item label="类型" prop="field102">
          <el-cascader v-model="formData.field102" :options="field102Options" :props="field102Props"
            :style="{width: '100%'}" placeholder="请选择类型" clearable></el-cascader>
        </el-form-item>
        <el-form-item label="计量单位" prop="field103">
          <el-input v-model="formData.field103" placeholder="请输入计量单位" clearable :style="{width: '100%'}">
          </el-input>
        </el-form-item>
        <el-form-item label="税率" prop="field104">
          <el-input v-model="formData.field104" placeholder="请输入税率" clearable :style="{width: '100%'}">
          </el-input>
        </el-form-item>
        <el-form-item label="需求说明" prop="field105">
          <el-input v-model="formData.field105" placeholder="请输入需求说明" clearable :style="{width: '100%'}">
          </el-input>
        </el-form-item>
        <el-form-item label="备注" prop="field106">
          <el-input v-model="formData.field106" placeholder="请输入备注" clearable :style="{width: '100%'}">
          </el-input>
        </el-form-item>
        <el-form-item label="规格型号" prop="field107">
          <el-input v-model="formData.field107" placeholder="请输入规格型号" clearable :style="{width: '100%'}">
          </el-input>
        </el-form-item>
        <el-form-item label="单价" prop="field108">
          <el-input v-model="formData.field108" placeholder="请输入单价" clearable :style="{width: '100%'}">
          </el-input>
        </el-form-item>
        <el-form-item size="large">
          <el-button type="primary" @click="submitForm">提交</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </template>
  <script>
  export default {
    components: {},
    props: [],
    data() {
      return {
        formData: {
          mobile: '',
          field102: [],
          field103: undefined,
          field104: undefined,
          field105: '',
          field106: undefined,
          field107: undefined,
          field108: undefined,
        },
        rules: {
          mobile: [{
            required: true,
            message: '请输入产品名称',
            trigger: 'blur'
          }, {
            pattern: /^1(3|4|5|7|8|9)\d{9}$/,
            message: '手机号格式错误',
            trigger: 'blur'
          }],
          field102: [{
            required: true,
            type: 'array',
            message: '请至少选择一个field102',
            trigger: 'change'
          }],
          field103: [{
            required: true,
            message: '请输入计量单位',
            trigger: 'blur'
          }],
          field104: [{
            required: true,
            message: '请输入税率',
            trigger: 'blur'
          }],
          field105: [{
            required: true,
            message: '请输入需求说明',
            trigger: 'blur'
          }],
          field106: [],
          field107: [{
            required: true,
            message: '请输入规格型号',
            trigger: 'blur'
          }],
          field108: [{
            required: true,
            message: '请输入单价',
            trigger: 'blur'
          }],
        },
        field102Options: [],
        field102Props: {
          "multiple": false
        },
      }
    },
    computed: {},
    watch: {},
    created() {},
    mounted() {},
    methods: {
      submitForm() {
        this.$refs['elForm'].validate(valid => {
          if (!valid) return
          // TODO 提交表单
        })
      },
      resetForm() {
        this.$refs['elForm'].resetFields()
      },
      getField102Options() {
        // TODO 发起请求获取数据
        this.field102Options
      },
    }
  }
  
  </script>
  <style>
  </style>
  